import { t } from 'i18next'
import { useEffect, useState } from 'react'
import { Select } from '@kedacom/react-next'
import { StyleData, allVmpStyleData } from '../interface'
import { StyledChoose } from './style'
import StyleModal from './StyleModal'
import { useMeetingParamsStore } from '../../../meetingParams/store'

interface StyleChooseProps {
	styleData: StyleData
	isShowSingle?: boolean
	disabled?: boolean
	container?: HTMLDivElement | null
	onSelect: (id: number) => void
}
export default function StyleChoose(props: StyleChooseProps) {
	const { styleData, onSelect, isShowSingle, disabled, container } = props
	const [open, setOpen] = useState<boolean>(false)
	const [value, setValue] = useState(styleData.listItemCount) /**下拉选中的 3画面  4画面*/
	const [valueSource, setValueSource] = useState(allVmpStyleData) /**小画面展示的数据源*/
	const [selectData, setSelectData] = useState<{ value: number; label: string }[]>([])
	const [isSelectOption, setIsSelectOption] = useState(false)
	useEffect(() => {
		// let sfu_id = [1, 2, 4, 5, 34, 64, 13, 7, 8, 18, 65, 66, 19, 17, 67, 11]
		const meetingType = useMeetingParamsStore.getState().meetingType
		let _valueSource = allVmpStyleData.filter((item) => {
			if (meetingType === 2) {
				return item.listItemCount === value
				/**value值变化 删选出该画面风格画面数据源头 */
			} else {
				return item.listItemCount === value /**value值变化 删选出该画面风格画面数据源头 */
			}
		})
		setValueSource(_valueSource) /**设置小画面的数据源 */
		/**下拉列表 */
		let _selectData: { value: number; label: string }[] = []
		let result = allVmpStyleData.filter((item) => {
			const meetingType = useMeetingParamsStore.getState().meetingType
			// if (meetingType === 2) {
			// 	if (sfu_id.includes(item.id)) {
			// 		return true
			// 	} else {
			// 		return false
			// 	}
			// }
			return true
		})
		result.forEach((item) => {
			let count = item.listItemCount
			if (_selectData.findIndex((i) => i.value === count) !== -1) return
			_selectData.push({
				value: count,
				label: count + t('画面'),
			})
		})
		setSelectData(_selectData)
		if (isSelectOption) {
			onSelect(_valueSource[0].id) /**默认选中第一个*/
		}
		setIsSelectOption(false)
	}, [value])
	useEffect(() => {
		setValue(styleData.listItemCount) /**根据风格获取风格对应的value值*/
	}, [styleData])
	/**展示风格选择框*/
	const handleShowStyleSelectModal = () => {
		if (disabled) {
			return false
		}
		setOpen(true)
	}
	return (
		<StyledChoose className="style-choose" disabled={disabled}>
			{isShowSingle && (
				<div
					className={`single-box style-box select ${styleData.className}`}
					data-key={styleData.dataKey}
				></div>
			)}
			{!isShowSingle && (
				<>
					<div className="slider-bar">
						<div className="slider-bar-l">
							<Select
								container={container !== undefined ? () => container : container}
								width={110}
								className="style-select"
								value={value}
								options={selectData}
								onClick={(e, val, opt) => {
									setValue(val)
									setIsSelectOption(true)
								}}
								disabled={disabled}
							></Select>
							<div className="slider-view">
								<ul>
									{valueSource.map((item) => (
										<li
											key={item.id}
											className={`style-box ${item?.className} ${
												item?.id === styleData.id ? 'select' : ''
											}`}
											data-key={item.dataKey}
											onClick={() => {
												!disabled && onSelect(item.id)
											}}
										></li>
									))}
								</ul>
							</div>
							<div
								className={`${disabled ? 'disabled-btn-more' : 'btn-more'}`}
								onClick={handleShowStyleSelectModal}
							>
								...
							</div>
						</div>
						{false && (
							<div className="slider-bar-r">
								<div className="btn_filter_btn">{t('自动填充空闲画面')}</div>
							</div>
						)}
					</div>
					<StyleModal open={open} style={styleData} setOpen={setOpen} onSelect={onSelect} />
				</>
			)}
		</StyledChoose>
	)
}
